<!--
 * @Author: your name
 * @Date: 2021-08-04 15:26:55
 * @LastEditTime: 2021-08-04 17:26:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \wodegit\s-1811A-yangbing\瀑布流\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .flex{
        width: 100%;
        display: flex;
    }

    .left{
        width: 50%;
        background: #ccc;
        height: 100%;
    }
    .right{
        width: 50%;
        height: 100%;
        background-color: #eee;
    }

    .left>div,.right>div{
        width: 100%;
    }

    .left>div>img,.right>div>img{
        width: 100%;
        border-radius: 20px;
    }
    
</style>
<body>
    <div id='app'>
        <div class="flex">
            <div class="left"  ref="left">
                <div v-for='(item,ind) in leftlist'>
                    <img :src="item.img" alt="">
                </div>
            </div>
            <div class="right" ref='right'>
                <div v-for='(item,ind) in rightlist'>
                    <img :src="item.img" alt="">
                </div>
            </div>
        </div>
    </div>
    <script src="./index.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    list:[
                        {
                            img:'https://img0.baidu.com/it/u=2482808645,3771819902&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img1.baidu.com/it/u=1834859148,419625166&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img1.baidu.com/it/u=3876023743,3643640497&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=1183421147,2593560592&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=3070601450,473916151&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=1228053746,2726943898&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=3065946564,1850762713&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=828479682,3583073128&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=522427940,2015522050&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=3691040798,3521511473&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=400'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=984829580,3549932926&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=1862976103,1947757229&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=2958833391,1747742409&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=536569235,4030128376&fm=15&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=2884650736,1301399339&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img1.baidu.com/it/u=2924496226,3141471136&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=2482808645,3771819902&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img1.baidu.com/it/u=1834859148,419625166&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img1.baidu.com/it/u=3876023743,3643640497&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=1183421147,2593560592&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=3070601450,473916151&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=1228053746,2726943898&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=3065946564,1850762713&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=828479682,3583073128&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=522427940,2015522050&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=3691040798,3521511473&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=400'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=984829580,3549932926&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=1862976103,1947757229&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=2958833391,1747742409&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=536569235,4030128376&fm=15&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=2884650736,1301399339&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img1.baidu.com/it/u=2924496226,3141471136&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=3691040798,3521511473&fm=253&fmt=auto&app=120&f=JPEG?w=400&h=400'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=984829580,3549932926&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=1862976103,1947757229&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=2958833391,1747742409&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img2.baidu.com/it/u=536569235,4030128376&fm=15&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img0.baidu.com/it/u=2884650736,1301399339&fm=26&fmt=auto&gp=0.jpg'
                        },
                        {
                            img:'https://img1.baidu.com/it/u=2924496226,3141471136&fm=26&fmt=auto&gp=0.jpg'
                        },
                        
                    ], //整体数据
                    leftlist:[], //左边数据
                    rightlist:[], //右边数据
                }
            },
            created(){
                this.leftlist.push(this.list[0])
                this.rightlist.push(this.list[1])
            },
            mounted(){
                this.list.forEach((item,idx)=>{
                    if(idx>1){
                        this.$nextTick(()=>{
                            setTimeout(() => {
                                this.initData(item,idx);
                            }, 100);
                        })
                    }
                })
            },
            methods:{
                initData(item,idx){
                    let left = this.$refs.left.offsetHeight
                    let right = this.$refs.right.offsetHeight
                    console.log(left,'===',right);
                    if(left>right){
                        console.log("right",idx);
                         this.rightlist.push(item)
                    }else if (left<right) {
                        console.log("left",idx);
                       this.leftlist.push(item)
                    }else if (left === right) {
                        this.leftlist.push(item)
                    }
                }
                
            }
        })
    </script>
</body>

</html>